import React from 'react';
import { Card, Table, Tag, Button, Space, Breadcrumb, Progress } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { HomeOutlined, UploadOutlined, DownloadOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Material.module.less';

type MaterialStatus = 'pending' | 'uploaded' | 'approved' | 'rejected';

interface MaterialItem {
  id: string;
  name: string;
  type: string;
  status: MaterialStatus;
  uploadTime?: string;
  fileSize?: string;
  progress?: number;
}

const statusMap = {
  pending: { text: '待上传', color: 'default' },
  uploaded: { text: '已上传', color: 'blue' },
  approved: { text: '已通过', color: 'green' },
  rejected: { text: '已驳回', color: 'red' }
} as const;

const Material: React.FC = () => {
  const columns: ColumnsType<MaterialItem> = [
    {
      title: '材料名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '材料类型',
      dataIndex: 'type',
      key: 'type',
      render: text => <Tag color="blue">{text}</Tag>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: MaterialStatus) => {
        const { text, color } = statusMap[status];
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '上传进度',
      key: 'progress',
      render: (_, record) => (
        record.progress !== undefined ? (
          <Progress percent={record.progress} size="small" />
        ) : (
          '-'
        )
      ),
    },
    {
      title: '文件大小',
      dataIndex: 'fileSize',
      key: 'fileSize',
    },
    {
      title: '上传时间',
      dataIndex: 'uploadTime',
      key: 'uploadTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          {record.status === 'pending' && (
            <Button type="link" icon={<UploadOutlined />}>上传</Button>
          )}
          {['uploaded', 'approved'].includes(record.status) && (
            <Button type="link" icon={<DownloadOutlined />}>下载</Button>
          )}
          {record.status === 'rejected' && (
            <Button type="link" icon={<UploadOutlined />}>重新上传</Button>
          )}
        </Space>
      ),
    },
  ];

  const data: MaterialItem[] = [
    {
      id: '1',
      name: '档案移交清单',
      type: '清单文件',
      status: 'approved',
      uploadTime: '2024-03-15 10:30',
      fileSize: '2.5MB'
    },
    {
      id: '2',
      name: '档案编目数据',
      type: '数据文件',
      status: 'uploaded',
      uploadTime: '2024-03-18 14:20',
      fileSize: '15MB'
    },
    {
      id: '3',
      name: '整改报告',
      type: '报告文件',
      status: 'pending'
    },
    {
      id: '4',
      name: '电子档案数据包',
      type: '数据包',
      status: 'rejected',
      uploadTime: '2024-03-17 09:15',
      fileSize: '1.2GB'
    }
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '正式验收',
          },
          {
            title: '材料管理',
          }
        ]} />
      </div>

      <Card 
        title="验收材料管理" 
        className={styles.materialCard}
        extra={
          <Space>
            <Button>下载模板</Button>
            <Button type="primary" icon={<UploadOutlined />}>批量上传</Button>
          </Space>
        }
      >
        <Table
          columns={columns}
          dataSource={data}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`
          }}
        />
      </Card>
    </MainLayout>
  );
};

export default Material; 